<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
	</head>
	<body>
		<div class="wrap">
			<!--第一张-->
			<div class="first">
				<!--logo-->
				<img class="logo" src="img-sc/3.png" />
				<!--背景-->
				<img class="bg1" src="img-sc/1_bg.jpg" />
				<!--30s-->
				<img class="f_title1" src="img-sc/1_30miao.png" />
				<!--地中海-->
				<img class="f_title2" src="img-sc/1_dizhonghai.png" />
				<!--旋风车手-->
				<img class="f_title3" src="img-sc/1_xuanfeng.png" />
				<!--我要挑战-->
				<img class="btn_tiaozhan" src="img-sc/1_tiaozhan.png" />
				<!--游戏规则-->
				<img class="btn_rules" src="img-sc/1_guize.png" />
			</div>
			<!--第二张  规则-->
			<div class="second">
				<!--30s-->
				<img class="s_title1" src="img-sc/1_30miao.png" />
				<!--背景框-->
				<img class="s_kuang" src="img-sc/2-kuang.png" />
				<img class="s_text" src="img-sc/2-t&k.png" />
				<!--关闭-->
				<img class="s_close" src="img-sc/2-del.png" />
				<!--我要挑战-->
				<img class="btn_tiaozhan" src="img-sc/1_tiaozhan.png" />
			</div>
			<!--第三张-->
			<div class="third">
				<!--背景-->
				<img class="bg3" src="img-sc/3-bigBackground.png" />
				<!--logo-->
				<img class="logo3" src="img-sc/3.png" />
				<!--文字-->
				<img class="t_text" src="img-sc/t-title.png" />
				<!--开始游戏-->
				<img class="t_startBg" src="img-sc/3-stargameBackground.png" />
				<img class="t_startText" src="img-sc/3-starGamebtn.png" />
				<!--玩法-->
				<img class="t_wfbg" src="img-sc/3-smallBcakground.png" />
				<img class="t_wf" src="img-sc/t_wf.png" />
			</div>
			<!--第四张-->
			<div class="fourth">
				<!--赛道-->
				<div id="track">
					<img src="img-sc/4-1saidaopng.png" />
					<img src="img-sc/4-1saidaopng.png" />
					<img src="img-sc/4-1saidaopng.png" />
				</div>
				<!--<img class="f_saidao" src="img-sc/4-1saidaopng.png"/>-->
				<!--红绿灯-->
				<img class="f_hld" src="img-sc/4_hld1.png" />
				<!--起跑线-->
				<img class="f_qpx" src="img-sc/4-1qpx.png" />
				<!--文字-->
				<img class="f_text" src="img-sc/4-1ready.png" />
				<!--车-->
				<img class="car" src="img-sc/4-1car.png" id="car" />
				<!--左右键-->
				<img class="btn_left" src="img-sc/left.png" />
				<img class="btn_right" src="img-sc/right.png" />
				<!--计时器-->
				<img class="jsq" src="img-sc/4-1jsq.png" />
				<div class="djs">
					<span>0:0:</span>
					<span class="time" id="djs_time">30</span>
				</div>
				<!--加速器-->
				<img class="f_jiasuqi" src="img-sc/4_jiasuqi.png" />
				<!--障碍物-->
				<div class="f_zaw">
					<img src='img-sc/4-2zhangaiwu.png'>;
				</div>
				<canvas id="myCanvas"></canvas>
			</div>
			<!--第五张-->
			<div class="fifth">
				<!--过关了 第一面-->
				<div class="f_suc">
					<!--背景-->
					<img class="bg5_gg" src="img-sc/5-1_bg.png" />
					<!--logo-->
					<img class="logo3" src="img-sc/3.png" />
					<!--文字-->
					<img class="fs_text" src="img-sc/5-1guoguanle.png" />
					<img class="fs_text1" src="img-sc/5_1_text.png" />
					<img class="fs_qpy" src="img-sc/5-1qpy.png" />
					<p class="zaw_gs"></p>
					<p class="sc_wj"></p>
					<!--按钮-->
					<img class="fs_qds" src="img-sc/5-1yqds.png" />
					<img class="fs_ckph" src="img-sc/5b_ckph.png" />
				</div>
				<!--分享给好友 第二面-->
				<div class="f_fxhy">
					<img class="ff_kt" src="img-sc/5-2katong.png" />
					<img class="ff_jt" src="img-sc/5-2jiantou.png" />
					<img class="ff_text1" src="img-sc/5-2texttaotai.png" />
					<img class="ff_text2" src="img-sc/ff_text2.png" />
				</div>
				<!--没过关 第三面-->
				<div class="f_fail">
					<!--背景-->
					<img class="f_failbg" src="img-sc/5b_bg.jpg" />
					<img class="f_fail_text" src="img-sc/5b_hyh.png" />
					<img class="fs_text1" src="img-sc/5_1_text.png" />
					<p class="zaw_gs"></p>
					<p class="sc_wj"></p>
					<img class="f_fail_againText" src="img-sc/5b_gjzl.png" />
					<!--按钮-->
					<img class="f_fail_again" src="img-sc/5b_go.png" />
					<img class="fs_ckph" src="img-sc/5b_ckph.png" />
				</div>
			</div>
			<!--第六张 排行榜-->
			<div class="sixth">
				<!--排行背景-->
				<img class="s_rank" src="img-sc/pai_bg.png" />
				<!--30s-->
				<img class="s_title1" src="img-sc/1_30miao.png" />
				<!--关闭按钮-->
				<img class="six_close" src="img-sc/2-del.png" />
				<div id="data">

				</div>
			</div>
			<!--第七张 分享好友后 好友看到的界面-->
			<div class="seventh">
				<!--背景-->
				<img class="bg7" src="img-sc/background.png" alt="" />
				<!--logo-->
				<img class="logo3" src="img-sc/3.png" />
				<!--文字-->
				<img class="seventh_text" src="img-sc/seventh_text.png" />
				<!--旗-->
				<img class="s_flag" src="img-sc/qi.png" />
				<!--钟-->
				<img class="s_clock" src="img-sc/zhong.png" />
				<!--蓝色框-->
				<img class="seven_kuang" src="img-sc/seventh_te_bg.png" />
				<!--框里的字-->
				<img class="seventh_text3" src="img-sc/seventh_text3.png" />
				<p class="zaw_gs"></p>
				<p class="sc_wj"></p>
				<!--请点击-->
				<img class="seven_text1" src="img-sc/dianji.png" />
				<!--不错晋级-->
				<img class="btn_promotion" src="img-sc/bucuo.png" />
				<!--太差-->
				<img class="seven_loser" src="img-sc/cha.png" />

			</div>
		</div>
		<script>
			$(function() {
				//赛道
				var track = document.getElementById("track");
				var f_qpx = document.querySelector(".f_qpx");
				
				function trackFn(add) {
					var tTop = -198;
					var speed = 1;
					speed += add;
					fTop = 52;
					setInterval(function() {
						if(tTop >= 0) {
							tTop = -198;
						} else {
							tTop += speed;
						}
						track.style.top = tTop + "%";
						if(fTop >= 100) {
							fTop = 110;
						} else {
							fTop += speed;
						}
						f_qpx.style.top = fTop + "%";
					}, 50);
				}
				//红绿灯的变化
				var f_hld = document.querySelector(".f_hld");
				var f_text = document.querySelector(".f_text");
				var hld_time = null;

				function hld() {
					clearInterval(hld_time);
					var i = 0;
					hld_time = setInterval(function() {
						i++;
						if(i > 3) {
							clearInterval(hld_time);
							f_hld.style.display = "none";
							f_text.style.display = "none";
							//调用倒计时
							countDown();
							trackFn(2);
						} else {
							f_hld.src = "img-sc/4_hld" + i + ".png";
						}
					}, 1000)
				}
				//时钟的倒计时
				var djs_time = document.getElementById("djs_time");
				var cd_time = null;

				function countDown() {
					clearInterval(cd_time);
					var j = 29;
					cd_time = setInterval(function() {
						if(j < 1) {
							clearInterval(cd_time);
							//时间到
							$(".fifth").show();
							$(".f_suc").show();
						}
						djs_time.innerHTML = j;
						j--;
					}, 1000)

				}
				//随机数
				function rand(min,max){
					return parseInt(Math.random()*(max-min)+1)+min;
				}
				//生成障碍物
				function roadBlock(){
					
					$(".fourth").append("<div class='f_zaw'><img src='img-sc/4-2zhangaiwu.png'></div>")
					
				}
				//第一张
				$(".btn_rules").on("click", function() {
					$(".second").show();
				});
				$(".btn_tiaozhan").on("click", function() {
						$(".third").show();
						$(".first").hide();
					})
					//第二张
				$(".s_close").on("click", function() {
						$(".second").hide();
					})
					//第三张
				$(".t_startText").on("click", function() {
						$(".fourth").show();
						$(".third").hide();
						hld();
					})
					//第五张
				$(".fs_qds").on("click", function() {
					$(".f_fxhy").show();
				})
				$(".f_fxhy").on("click", function() {
					$(".f_fxhy").hide();
				})
				$(".fs_ckph").on("click", function() {
						$(".sixth").show();
					})
					//第六张
				$(".six_close").on("click", function() {
					$(".sixth").hide();
				})

			})
		</script>
		<script type="text/javascript">
		</script>
		<script type="text/javascript">
			//小车左右移动
			var left = $(".btn_left");
			var car = $(".car");
			left.on("touchstart", function(ev) {
				ev.preventDefault();
				left.timer = setInterval(function() {
					car.css("left", car.offset().left - 1);
					if(car.offset().left <= 16) {
						car.css("left", "16px");
					};

				}, 10);
			});
			left.on("touchend", function() {
				clearInterval(left.timer);
			});
			var right = $(".btn_right");
			right.on("touchstart", function(ev) {
				ev.preventDefault();
				right.timer = setInterval(function() {
					car.css("left", car.offset().left + 1);
					if(car.offset().left >= 300) {
						car.css("left", "300px");
					};

				}, 10);
			});
			right.on("touchend", function() {
				clearInterval(right.timer);
			});
		</script>

	</body>

</html>